<template>
  <div class="article-details">
    <el-card>
      <div slot="header" class="article-header">
        <h2>{{ article.title }}</h2>
        <p>{{ article.category }}</p>
      </div>
      <div class="article-content" v-html="article.content"></div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElCard } from 'element-plus';

export default {
  components: {
    ElCard
  },
  data() {
    return {
      article: {} // 文章数据
    };
  },
  methods: {
    // 模拟获取文章详情数据
    fetchArticleDetails() {
      // 这里假设您已经从后端获取到了文章数据，并将其赋值给 article 变量
      this.article = {
        title: '文章标题',
        category: '文章分类',
        content: '<p>文章内容</p>'
      };
    }
  },
  mounted() {
    // 在组件挂载时获取文章详情数据
    this.fetchArticleDetails();
  }
};
</script>

<style scoped>
.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-content {
  margin-top: 20px;
}
</style>
